<template>
    <div class="amuse_container">
        <div class="amuse_head">
            <h1>论逗<span class="el-icon-search"></span></h1>
        </div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="影视" name="first">
                <div class="movie_container">
                    <div class="movie_title">
                        <span class="new_book">影院热映</span>
                        <router-link :to="{path:'/hotshow'}">
                            <span class="more">更多<span class="el-icon-arrow-right"></span></span>
                        </router-link>
                    </div>
                    <router-link :to="{path:'/movie'}">
                        <div class="movie_list">
                            <img src="../../assets/images/45.gif" alt="">
                            <div class="movie_content">
                                <h1>速度与激情8</h1>
                                <p class="author">作者:[意]埃莱娜·费兰特</p>
                                <p class="discuss">评论数<span>3万</span></p>
                            </div>
                        </div>
                    </router-link>
                    <div class="movie_list">
                        <img src="../../assets/images/45.gif" alt="">
                        <div class="movie_content">
                            <h1>金刚狼3</h1>
                            <p class="author">作者:[意]埃莱娜·费兰特</p>
                            <p class="discuss">评论数<span>3万</span></p>
                        </div>
                    </div>
                </div>
                <div class="movie_container">
                    <div class="movie_title">
                        <span class="new_book">即将上映</span><span class="more">更多<span class="el-icon-arrow-right"></span></span>
                    </div>
                    <div class="movie_list">
                        <img src="../../assets/images/45.gif" alt="">
                        <div class="movie_content">
                            <h1>蒸汽火车头</h1>
                            <p class="author">作者:[意]埃莱娜·费兰特</p>
                            <p class="discuss">评论数<span>3万</span></p>
                        </div>
                    </div>
                    <div class="movie_list">
                        <img src="../../assets/images/45.gif" alt="">
                        <div class="movie_content">
                            <h1>蒸汽火车头</h1>
                            <p class="author">作者:[意]埃莱娜·费兰特</p>
                            <p class="discuss">评论数<span>3万</span></p>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="书籍" name="second">
                <div class="books_container">
                    <div class="books_title">
                        <span class="new_book">新书速递</span>
                        <router-link :to="{path:'/newbook'}">
                            <span class="more">更多<span class="el-icon-arrow-right"></span></span>
                        </router-link>
                    </div>
                    <router-link :to="{path:'/books'}">
                        <div class="books_list">
                            <img src="../../assets/images/45.gif" alt="">
                            <div class="books_content">
                                <h1>蒸汽火车头</h1>
                                <p class="author">作者:[意]埃莱娜·费兰特</p>
                                <p class="discuss">评论数<span>3万</span></p>
                            </div>
                        </div>
                    </router-link>
                </div>
                <div class="books_container">
                    <div class="books_title">
                        <span class="new_book">杂志速食</span><span class="more">更多<span class="el-icon-arrow-right"></span></span>
                    </div>
                    <router-link :to="{path:'/magazine'}">
                        <div class="books_list">
                            <img src="../../assets/images/45.gif" alt="">
                            <div class="books_content">
                                <h1>时尚新娘</h1>
                                <p class="author">标签:<el-tag>时尚</el-tag><el-tag>国际</el-tag><el-tag>新娘</el-tag></p>
                                <p>2017年5月刊</p>
                                <p class="discuss">评论数<span>3万</span></p>
                            </div>
                        </div>
                    </router-link>
                </div>
            </el-tab-pane>
            <el-tab-pane label="游戏" name="third">
                <div class="game_container">
                    <div class="game_title">
                        <span class="new_book">网络游戏</span>
                        <router-link :to="{path:'/hotgame'}">
                            <span class="more">更多<span class="el-icon-arrow-right"></span></span>
                        </router-link>
                    </div>
                    <ul class="game_list">
                        <router-link :to="{path:'/game'}">
                            <li>
                                <a href="#">
                                    <img src="../../assets/images/54.gif" alt="">
                                    <p>英雄联盟</p>
                                    <p>评论数: <span>121532</span></p>
                                </a>
                            </li>
                        </router-link>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/55.gif" alt="">
                                <p>守望先锋</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/54.gif" alt="">
                                <p>穿越火线</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="game_container">
                    <div class="game_title">
                        <span class="new_book">热门单机</span>
                        <router-link :to="{path:'/hotgame'}">
                            <span class="more">更多<span class="el-icon-arrow-right"></span></span>
                        </router-link>
                    </div>
                    <ul class="game_list">
                        <router-link :to="{path:'/game'}">
                            <li>
                                <a href="#">
                                    <img src="../../assets/images/53.gif" alt="">
                                    <p>三国志13</p>
                                    <p>评论数: <span>121532</span></p>
                                </a>
                            </li>
                        </router-link>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/56.gif" alt="">
                                <p>GTA5</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/53.gif" alt="">
                                <p>绝地求生</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane label="音乐" name="fourth">
                <div class="music_container">
                    <div class="music_title">
                        <span class="new_book">华语新歌</span>
                        <router-link :to="{path:'/newmusic'}">
                            <span class="more">更多<span class="el-icon-arrow-right"></span></span>
                        </router-link>
                    </div>
                    <ul class="music_list">
                        <router-link :to="{path:'/music'}">
                            <li>
                                <a href="#">
                                    <img src="../../assets/images/60.gif" alt="">
                                    <p>实名制</p>
                                    <p>好妹妹乐队</p>
                                    <p>评论数: <span>121532</span></p>
                                </a>
                            </li>
                        </router-link>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/60.gif" alt="">
                                <p>实名制</p>
                                <p>好妹妹乐队</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/60.gif" alt="">
                                <p>实名制</p>
                                <p>好妹妹乐队</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/60.gif" alt="">
                                <p>实名制</p>
                                <p>好妹妹乐队</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="music_container">
                    <div class="music_title">
                        <span class="new_book">日韩新歌</span><span class="more">更多<span class="el-icon-arrow-right"></span></span>
                    </div>
                    <ul class="music_list">
                        <li>
                            <a href="#">
                                <img src="../../assets/images/60.gif" alt="">
                                <p>实名制</p>
                                <p>好妹妹乐队</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/60.gif" alt="">
                                <p>实名制</p>
                                <p>好妹妹乐队</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/60.gif" alt="">
                                <p>实名制</p>
                                <p>好妹妹乐队</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="../../assets/images/60.gif" alt="">
                                <p>实名制</p>
                                <p>好妹妹乐队</p>
                                <p>评论数: <span>121532</span></p>
                            </a>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
        </el-tabs>
        <Homenav></Homenav>
    </div>
</template>
<script>
    import Homenav from '@/components/homenav'
    export default {
        name:'amuse',
        data(){
            return{
                activeName: 'first'
            }
        },
        components:{
            Homenav
        }
    }
</script>
<style lang="less" scoped>

@rem:35rem;
.amuse_head{
    overflow:hidden;
    font-size:16/@rem;
    padding:10/@rem;
    background:#fff;
    h1{
        text-align:center;
    }
    span{
        float:right;
        font-size:22/@rem;
        color:#7295cd;
    }

}
.movie_container{
    margin-top:20/@rem;
    padding:0 10/@rem;
    overflow:hidden;
    // width:200%;
    .movie_title{
        margin-bottom:10/@rem;
        overflow:hidden;
        .new_book{
            float:left;
            font-size:16/@rem;
        }
        .more{
            float:right;
            color:#287fff
        }
    }
    .movie_list{
        margin-top:10/@rem;
        float:left;
        overflow:hidden;
        position:relative;
        margin-right:10/@rem;
        img{
            float:left;
            width:70/@rem;
            height:90/@rem;
        }
        .movie_content{
            margin-left:10/@rem;
            float:left;
            line-height:20/@rem;
            
            h1{
                font-size:16/@rem;
            }
            .discuss{
                position:absolute;
                bottom:0;
                margin-top:18/@rem;
            }
        }
    }
}
.books_container{
    margin-top:20/@rem;
    padding:0 10/@rem;
    .books_title{
        margin-bottom:10/@rem;
        overflow:hidden;
        .new_book{
            float:left;
            font-size:16/@rem;
        }
        .more{
            float:right;
            color:#287fff
        }
    }
    .books_list{
        overflow:hidden;
        position:relative;
        img{
            float:left;
            width:70/@rem;
            height:90/@rem;
        }
        .books_content{
            margin-left:10/@rem;
            float:left;
            line-height:20/@rem;
            
            h1{
                font-size:16/@rem;
            }
            .discuss{
                position:absolute;
                bottom:0;
                margin-top:18/@rem;
            }
        }
    }
}
.music_container{
    margin-top:20/@rem;
    padding:0 10/@rem;
    .music_title{
        margin-bottom:10/@rem;
        overflow:hidden;
        .new_book{
            float:left;
            font-size:16/@rem;
        }
        .more{
            float:right;
            color:#287fff
        }
    }
    .music_list{
        overflow:hidden;
        width:200%;
        li{
            float:left;
            margin-right:10/@rem;
            a{
                line-height:20/@rem;
                img{
                    width:100/@rem;
                    height:120/@rem;
                }
            }
        }
        
    }
}
.game_container{
    margin-top:20/@rem;
    padding:0 10/@rem;
    .game_title{
        margin-bottom:10/@rem;
        overflow:hidden;
        .new_book{
            float:left;
            font-size:16/@rem;
        }
        .more{
            float:right;
            color:#287fff
        }
    }
    .game_list{
        overflow:hidden;
        width:200%;
        li{
            float:left;
            margin-right:10/@rem;
            a{
                line-height:20/@rem;
                img{
                    width:120/@rem;
                    height:80/@rem;
                }
            }
        }
        
    }
}
</style>